<template>
	<view class="content" style="background-color: #f5f5f5;">
		<u-navbar titleStyle="font-size:40rpx;color:#fff" :placeholder='true' title="海外专区" :autoBack="true"
			bgColor="#6B5ACD" leftIconColor='#FFF'>
		</u-navbar>
		<view class="blueBox">
			<u-input @change='changeGetList' v-model="search_key"
				customStyle="background:#fff;height:28rpx;margin:16rpx 32rpx 0" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #999" placeholder="" border="surround" shape='circle'></u-input>
		</view>
		<view class='swiperBox'>
			<view v-if="swiperList.length>0 && !search_key">
				<u-swiper :list="swiperList" height='274rpx' radius="10rpx" keyName='image'></u-swiper>
			</view>
		</view>
		<view class='jinxuanBox' v-if="!search_key">
			<scroll-view scroll-x="true" @scrolltolower='getTuijianList(true)'>
				<view class="flex" style="flex-wrap: nowrap;">
					<view class='box_li flexJBC' v-for="(item,index) in jinxuanList" :key="index">
						<view class='left cof fontS28' v-if="index==0">趋势精选</view>
						<div>
							<view class='right cof fontS20'
								:style="{background:index==0? 'linear-gradient(252.06deg, #D8888D 4.63%, #C17178 99.27%)':index==1?'linear-gradient(252.06deg, #C1ADC8 4.63%, #977BAE 99.27%)':'linear-gradient(252.06deg, #ADC8C6 4.63%, #7B9CAE 99.27%)'}">
								<view class='center'>海外进口精选</view>
								<view class='flexJBC'>
									<view style="margin-top: 6rpx;"
										@click="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+ item1.id)"
										class="center" v-for="(item1,index1) in item" :key="index1">
										<image :src="item1.image" mode=""
											style="width: 112rpx;height: 112rpx;border-radius: 8rpx;"></image>
										<view><text class='fontS16'>￥</text><text class='fontS20'>{{item1.price}}</text>
										</view>
									</view>
								</view>
							</view>
						</div>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 分类 -->
		<view class="lisBox">
			<u-tabs :list="tabs" @click="getList" :activeStyle="{color:'#333' }" keyName='cate_name'
				:itemStyle="{color: '#999', fontSize:'32rpx',lineHeight:'80rpx',}" lineColor="#6B5ACD">
			</u-tabs>
			<view class="padding32">
				<List :showTopTitle='false' :list="list" v-if="list.length>0" :showwant='false' :showCountry='true' />
				<u-empty v-if="list.length==0 && (!pageLoading)"  marginTop='20%'></u-empty>
				<u-loading-icon v-if="pageLoading" customStyle="marginTop:20%"></u-loading-icon>
			</view>
		</view>

	</view>
</template>



<script>
	import List from "@/componentes/list.vue"
	export default {
		components: {
			List
		},
		data() {
			return {
				pageLoading:false,
				activeTab: 0,
				search_key: '',
				tabs: [],
				swiperList: [],
				tuijianPage: 1,
				tuijianList: [], //精选列表辅助数据
				jinxuanList: [], //精选列表
				topPage: 1,
				id: 3,
				list: [],
				page: 1,
			}
		},
		onLoad(option) {
			this.id = option.id ? option.id : 3;
			this.getTuijianList();
			this.getSwiper()
			this.getTabs()
		},
		onReachBottom() {
			this.page++;
			this.getList()
		},
		methods: {
			getTabs() {
				this.$my.post('/index/Product/getPlatFormTypeProductType', {
					platform_type_id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.tabs = res.data
						this.getList()
					}
				})
			},
			getSwiper() {
				this.$my.post('/index/com/getAd', {
					type: 0,
					type_id: this.id
				}).then(res => {
					if (res.code == 200) {
						this.swiperList = res.data
					}
				})
			},

			getTuijianList(val) {
				if (val) {
					this.tuijianPage++
				}
				this.$my.post('/index/Product/getBestProduct', {
					platform_type_id: this.id,
					page: this.tuijianPage,
					limit: 10
				}).then(res => {
					if (res.code == 200 && res.data.data.length > 0) {
						this.jinxuanList = [];
						this.tuijianList = this.tuijianList.concat(res.data.data)
						let jinxuanList = [];
						let a = [];
						this.tuijianList.forEach((item, index) => {
							a.push(item)
							if (a.length == 2) {
								jinxuanList.push(a)
								a = [];
							} else {
								if (a.length == 1 && index == this.tuijianList.length - 1) {
									a = []
									a.push(item)
									jinxuanList.push(a)
								}
							}
						})
						this.jinxuanList = jinxuanList
						console.log(jinxuanList)
					}
				})
			},
			changeGetList(val) {
				this.page = 1
				this.getList()
			},
			getList(val) {
				this.pageLoading=true
				if (val) {
					// 点击分类
					this.activeTab = val.index
					this.page = 1
					this.list = []
					console.log(val, 'val')
				}

				this.$my.post('/index/Product/getPlatformTypeProductOverseas', {
					platform_type_id: this.id,
					page: this.page,
					category_id: this.tabs[this.activeTab].store_category_id,
					limit: 20,
					search_key: this.search_key,
				}).then(res => {
					if (res.code == 200) {
						this.pageLoading=false
						if (this.page == 1) {
							this.list = res.data.data
							console.log(val, this.list, 'val')
						} else {
							this.list = this.list.concat(res.data.data)
						}
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.content {
		.lisBox {
			width: 100%;
			margin-top: 24rpx;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;

			background: linear-gradient(#fff 0.5%, #f5f5f5 100%);
		}

		.jinxuanBox {
			padding-left: 32rpx;

			.box_li {
				height: 200rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;
				margin-right: 12rpx;
				background: linear-gradient(270deg, #24153C 87.21%, #372653 100%);

				.left {
					width: 30rpx;
					text-align: center;
					margin: 0 16rpx;

				}

				.right {
					width: 276rpx;
					flex: 1;
					padding: 12rpx 18rpx;
					box-sizing: border-box;
					height: 200rpx;

					border-radius: 20rpx;
				}
			}
		}

		.blueBox {
			overflow: hidden;
			height: 100px;
			background: #6B5ACD;
			border-radius: 0 0 50rpx 50rpx;


		}

		.swiperBox {
			margin: -50px 32rpx 0;


		}

		.box {
			padding: 0 4%;

			.li_center {
				// height: 190rpx;
				// background-color: red;
				padding-top: 20rpx;
				padding-bottom: 12rpx;

				.li_img {
					min-width: 190rpx;
					border-radius: 8rpx;
					overflow: hidden;

					.label {
						border-radius: 8rpx;
						margin: 8rpx 10rpx 0 0;
						padding: 0 8rpx;
						border: 2rpx solid #FFC047;
						color: #FFC047;
					}
				}
			}

		}

		// .card {
		// 	margin: 32rpx 4%;
		// 	height: 300rpx;
		// 	background-color: white;
		// 	box-sizing: border-box;
		// 	padding: 20rpx 24rpx;
		// }
		.bottom {
			padding: 0 4%;
			margin-top: 32rpx;

			.bottom_title {
				margin-bottom: 24rpx;
			}
		}
	}
</style>
